<template>
	<view class="contact-info">
		<view class="list">
		
		<view v-for="(item,index) in list" :key="index" class="list-item" @click="routeToDetail(item)">
			<view class="left-field">
				<image class="status-image" :src="item.access_authority.value==1?'/static/client/auth_open.png':'/static/client/auth_close.png'"></image>
				<text class="title">{{item.name}}</text>
				
			</view>
			<view class="right-field">
				<image class="phone-image" src="/static/personal/phone.png"></image>
				<text class="phone">{{item.mobile}}</text>
				<image class="right-image" src="/static/personal/right.png"></image>
			</view>
			
		</view>
		<view class="content-bottom"><text>共计&nbsp;&nbsp;{{total}}&nbsp;&nbsp;位联系人</text></view>
		</view>
		<view class="footer">
			<tn-button shape="round" fontSize="32" fontBold backgroundColor="#3B54DA" fontColor="#FFFFFF" width="282rpx" height="72rpx" @click="add">
				<!-- <text class="tn-icon-add"></text> -->
				+ 添加联系人</tn-button>
		</view>
	</view>
</template>

<script>
	export default{
		name:'contactPerson',
		props:{
			clientId:{
				type:String,
				required:true
			},
			moduleType:{
				type:String,
				default:'single'
			}
		},
		data(){
			return{
				total:0,
				list:[],
				currentPage:1,
				pageSize:10,
			}
		},
		created(){
			console.log('created child')
			
		},
		mounted(){
			this.getList();
		},
		// onReachBottom(){
		// 	console.log('onReachBottom')
		// 	if(this.total > this.pageSize * this.currentPage){
		// 		this.currentPage += 1;
		// 		this.getList();
		// 	}
		// },
		methods:{
			routeToDetail(item){
				//todo 联系人详情
				if(this.moduleType == 'all'){
					this.$Router.push({name:'contactDetail',query:{id:item.id, type:1}})
				} else {
					this.$Router.push({name:'contactDetail',query:{id:item.id, type:2}})
				}
				
			},
			loadMore(){
				if(this.total > this.pageSize * this.currentPage){
					this.currentPage += 1;
					this.getList();
				}
			},
			add(){
				this.$tip.toast('该功能暂未开通')
			},
			getList(){
				const reqData = {
					client_id:this.clientId,
					page:this.currentPage,
					limit:this.pageSize,
				}
				let url = '';
				if(this.moduleType == 'all') {
					url = '/api/business/contact/list';
				} else {
					url = '/api/business/contact/list';
				}
				this.$http.get(url, reqData).then((res) => {
					if(res.data.status == 200) {
						let list= res.data.data.data || [];
						this.list = this.list.concat(list);
						this.currentPage = res.data.data.current_page||1;
						this.pageSize =  res.data.data.per_page||20;
						this.total = res.data.data.total||0;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contact-info{
		
		font-size: 24rpx;
		.list{
			padding:30rpx 20rpx 112rpx;
			.content-bottom{
				color: #6F6F6F;
				margin:40rpx 0;
				text-align: center;
			}
		}
		.list-item{
			padding:0 20rpx 0 30rpx;
			height: 114rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #EFEFEF;
			.left-field{
				display: flex;
				align-items: center;
			}
			.status-image{
				width: 24rpx;
				height: 24rpx;
			}
			.title{
				color:#525252;
				font-size: 32rpx;
				font-weight: $Semibold;
				margin-left: 10rpx;
				
			}
			.right-field{
				display: flex;
				align-items: center;
			}
			.phone{
				margin-left: 10rpx;
				color:#000000;
				margin-right: 40rpx;
				
			}
			.phone-image{
				
				width: 20rpx;
				height: 28rpx;
			}
			.right-image{
				width: 10rpx;
				height: 20rpx;
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			height: calc(112rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;
			background: #FFFFFF;
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			align-items: center;
			.button{
				
			}
			
		}
	}
</style>